<!-- 个人发布一条数据 -->
<template>
	<view class="item">

		<!-- 上 -->
		<view class="item-head">
			<view class="head-left">
				<image class="img" :src="pageData.headImg" mode=""></image>

				<text class="name">发起人 {{pageData.name}}</text>
			</view>

			<view class="head-right">
				<text class="type">{{pageData.type | type(tabsListData)}}</text>
			</view>
		</view>

		<!-- 第三 -->
		<view class="item-thirdly">
			<view class="time">
				<uni-icons custom-prefix="iconfont2" type="icon-shizhong" size="28rpx"></uni-icons>

				<text class="time-text">{{pageData.startTime | time(pageData.endTime)}}</text>
			</view>
			<view class="address" @click="openAddressMap">
				<uni-icons class="icon" type="location" size="30rpx" style="line-height: 30rpx;"></uni-icons>

				<text class="time-text">{{pageData.address}}</text>
			</view>
			<view class="money">
				佣金￥{{pageData.commissionAmount}}/人
			</view>
		</view>

		<!-- 备注 -->
		<view class="item-remark" v-if="pageData.remark !== ''">
			{{pageData.remark | remark}}
		</view>

		<!-- 下 -->
		<view class="item-botton">

			<view class="botton-left">
				<view class="number">
					已接单{{pageData.applyNum}}/{{pageData.quota}}:
				</view>

				<view class="">
					<u-avatar-group :urls="urls" :maxCount="10" size="50" gap="0"></u-avatar-group>
				</view>
			</view>

			<view class="botton-right">
				<view class="buttom" :style="{
					backgroundColor: pageData.status === 0? '#EC606F':pageData.status === 1 ? '#19be6b' : '#ccc' 
				}" @click="enterList">
					{{pageData.status | status2}}
				</view>
			</view>

		</view>


		<!-- 书签 -->
		<view class="bookmark">
			<image v-if="pageData.status === 0" class="image" src="/static/images/bookmark1.png" mode=""></image>
			<image v-else class="image" src="/static/images/bookmark2.png" mode=""></image>
			<text class="text" :style="{color: pageData.status === 0 ? '#fff' : '#999'}">
				{{pageData.status | status}}
			</text>
		</view>
		
		<!-- 弹出层 -->
		<u-modal :show="show" :title="title" :content='content' :showCancelButton="true" :closeOnClickOverlay="true"
			@confirm="popSubmit" @cancel="popClose" @close="popClose">
			<view class="popButton" slot="confirmButton">
				<view @click="popClose" class="popButton-left-text">取消</view>

				<!-- #ifdef H5 -->
				<view class="popButton-textBox">
					<uni-link :href="hrefUrl" :showUnderLine="false">
						<view class="popButton-text">联系客服</view>
					</uni-link>
				</view>

				<!-- #endif -->

				<!-- #ifdef MP-WEIXIN -->
				<view class="popButton-textBox">
					<button open-type="contact" class="popButton-text">联系客服</button>
				</view>
				<!-- #endif -->

			</view>
		</u-modal>

	</view>
</template>

<script>
	// 引入vueX
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'

	//api请求
	import {
		getActivityPayApi, // 订单支付
		applicantCancelApi
	} from '@/api/activity.js'
	



	// 公共方法
	import {
		wxPayment, // 微信支付
	} from '@/utils/wx/wxPublick-h5.js'
	import {
		wxPaymentWeiXin
	} from '@/utils/wx/wxPublick-weixin.js'

	export default {
		props: {
			data: {
				type: Object,
				default: () => {}
			},

			tabsList: {
				type: Array,
				default: () => []
			},


		},

		data() {
			return {
				pageData: {},
				tabsListData: [],

				urls: [], // 头像组
				
				show: false, // 是否显示弹窗
				title: '取消报名',
				content: '取消报名需联系客服',
				
				hrefUrl: '', // 客服链接

			};
		},
		created() {

		},
		watch: {
			data: {
				handler() {
					if (Object.keys(this.data).length > 0) {
						let obj = this.data
						this.pageData = {
							id: obj.id, // 活动id

							headImg: obj.avatarUrl,
							name: obj.nickName ? obj.nickName : obj.contact,
							type: obj.type,

							startTime: obj.startTime, // 开始时间
							endTime: obj.endTime, // 结束时间

							address: obj.address, // 地址

							commissionAmount: obj.commissionAmount, // 佣金

							remark: obj.remark, // 备注

							applyNum: obj.applicantNum, // 报名人数

							quota: obj.quota, // 需要人数

							status: obj.artistApplicantStatus, // 艺人申请状态
							phone: obj.phone, // 客户电话

						}

						this.urls = obj.applicantList.map(res => (res.coverUrl))

					}

				},
				deep: true,
				immediate: true
			},

			tabsList: {
				handler() {
					if (this.tabsList.length > 0) {
						let arr = []


						this.tabsList.map(res => {
							res.data.cateList.map(res2 => {
								arr.push(res2)
							})
						})
						this.tabsListData = [...arr]


						console.log(this.tabsList, 'kklk', this.tabsListData);
					}

				},
				deep: true,
				immediate: true
			}
		},
		filters: {

			/**
			 * 开始时间
			 */
			time(start, end) {

				if (end) {
					let start1 = start.split(' ')
					let start2 = start1[0].split("-")
					let start3 = start1[1].split(":")

					let end1 = end.split(' ')
					let end2 = end1[0].split('-')
					let end3 = end1[1].split(':')


					if (start1[0] === end1[0]) {
						return start2[1] + '月' + start2[2] + '日' + ' ' + start3[0] + ":" + start3[1] + '-' + end3[0] +
							':' + end3[1]
					} else {
						return start2[1] + '月' + start2[2] + '日' + ' ' + start3[0] + ":" + start3[1] + '-' + end2[1] +
							'月' + end2[2] + '日' + ' ' + end3[0] + ':' + end3[1]
					}
				} else {
					return start
				}


			},

			/**
			 * 活动所属类型
			 */
			type(val, list) {
				let str = ''
				list.map(res => {
					if (res.id === val) {
						str = res.title
					}
				})

				return str
			},


			/**
			 * 备注
			 */
			remark(val) {
				let str = ''
				if (val?.length > 50) {
					str = val.slice(0, 50)
				} else {
					str = val
				}


				return str;
			},

			/**
			 * 艺人申请状态
			 */
			status(val) {
				let str = ''
				switch (val) {

					case 0: {
						str = '已报名'
					}
					break;
					case 1: {
						str = '已邀约'
					}
					break;
					case 2: {
						str = '已完成'
					}
					break;
					case 3: {
						str = '已取消'
					}
					break;
					case 4: {
						str = '已撤销'
					}
					break;
				}


				return str;
			},
			
			
			/**
			 * 按钮文字
			 */
			status2(val) {
				let str = ''
				switch (val) {
			
					case 0: {
						str = '取消报名'
					}
					break;
					case 1: {
						str = '联系客户'
					}
					break;
					case 2: {
						str = '已完成'
					}
					break;
					case 3: {
						str = '已取消'
					}
					break;
					case 4: {
						str = '已撤销'
					}
					break;
				}
			
				return str;
			}



		},
		methods: {

			...mapMutations(['setApplyItemData']),
			
			
			/**
			 * 弹窗确定
			 */
			popSubmit() {
			
				this.popClose()
			},
			
			/**
			 * 关闭弹窗
			 */
			popClose(val) {
				this.show = false
			},
			


			// 进入报名列表
			async enterList() {
				
				// 待邀约,可以取消报名,弹窗提示
				if(this.pageData.status === 0){
					this.show = true
					// let res = await applicantCancelApi(this.pageData.id)
					// if(res.code !== 200) return
					// this.$public.showText('已取消报名')
					// this.pageData.status = 4
					return
				}
				
				
				// 已邀约,可以联系客户
				if(this.pageData.status === 1){
					await this.$public.phoneCall(this.pageData.phone)
					return
				}
				
			},

			/**
			 * 支付
			 */
			async setPayment() {
				console.log(this.pageData, '看看页面数据');
				let obj = {
					orderId: this.pageData.id, // 活动id
					payType: this.pageData.payType, // 支付方式 0-余额；1-微信公众号，2-微信小程序
				}

				const res = await getActivityPayApi(obj)
				if (res.code !== 200) {
					return
				}

				// 如果是余额支付,那就不要掉起支付
				if (this.pageData.payType === 0) {
					return this.$public.showText('支付成功')
				}

				wxPaymentWeiXin(res.data.result.jsConfig)
			},



			/**
			 * 打开地图
			 */
			openAddressMap() {

				// 地图所需的数据
				let obj = {
					latitude: this.pageData.latitude, //纬度
					longitude: this.pageData.longitude, //经度
					// address: this.pageData.address, // 详细说明
				}
				if (this.pageData.address.indexOf("·") === -1) {
					obj['address'] = this.pageData.address
				} else {
					let str = this.pageData.address.split("·")
					obj['name'] = str[0]
					obj['address'] = str[1]
				}

				this.$public.openAddressMap(obj)
			},




		}
	}
</script>

<style lang="less" scoped>
	.item {
		#box(-, -, 24rpx, #fff);
		#padding(24rpx);
		position: relative;

		.item-head {
			#flex(-, space-between, center);
			margin-bottom: 24rpx;

			.head-left {
				#flex(-, -, center);

				.img {
					#box(68rpx, 68rpx, 50%, -, 2rpx solid rgba(#000, .1));
				}

				.name {
					#font(28rpx, #3c4766, 400);
					margin-left: 14rpx;
				}
			}


			.head-right {
				margin-right: 48rpx;

				.type {
					#font(24rpx, #e45d4e, 400);
					#padding(8rpx 12rpx);
					background-color: #FFF7EA;
					margin-right: 24rpx;
				}
			}


		}




		.item-thirdly {
			position: relative;

			.time,
			.address {
				#flex(-, -, center);

				.time-text {
					#font(24rpx, #3c4766, 400);
					line-height: 36rpx;
					margin-left: 12rpx;
				}
			}

			.address {
				align-items: flex-start !important;
				
				.icon{
					margin-top: 4rpx;
				}
	
			}

			.time {
				margin-bottom: 16rpx;
			}

			.money {
				position: absolute;
				top: 0;
				right: 0;

				#font(24rpx, #EC606F, 400);
			}
		}

		.item-remark {
			background-color: #eee;
			#font(24rpx, #666);
			#padding(24rpx);
			border-radius: 12rpx;
			margin-top: 24rpx;
		}

		.item-botton {
			margin-top: 32rpx;
			#flex(-, space-between, center);

			.botton-left {
				#flex(-, flex-start, center);

				.number {
					#font(24rpx, #3c4766);
					margin-right: 12rpx;
				}

			}

			.botton-right {
				#flex(-, -, center);

				.phone {
					#flex(-, center, center);
					#font(24rpx, #fff, 400);
					#box(-, 56rpx, 100rpx, #8cde9b);
					#padding(0 24rpx);

					.phone-text {
						margin-right: 12rpx;
					}
				}

				.buttom {
					margin-left: 12rpx;
					#flex(-, center, center);
					#font(24rpx, #fff, 400);
					#box(148rpx, 56rpx, 100rpx);
				}
			}

			.botton-right2 {
				background-color: #eee;
				color: #999;
			}

		}



		// 书签
		.bookmark {
			position: absolute;
			right: 20rpx;
			top: 0;
			line-height: 28rpx;

			.image {
				#box(60rpx, 64rpx);
			}

			.text {
				#font(16rpx, #333);
				#position(absolute, 50%, 50%);
				margin-top: -10rpx;
				margin-left: -24rpx;
			}

		}
		
		
		.popButton {
			#flex(-, space-between, center);
			height: 96rpx;
			border-top: 2rpx solid #d6d7d9;
		
		
			.popButton-left-text {
				#flex(-, center, center);
				#font(32rpx, rgb(96, 98, 102));
				#box(50%, 100%);
				border-right: 2rpx solid #d6d7d9;
			}
		
			.popButton-textBox {
				#flex(-, center, center);
				#box(50%, 100%);
		
				.popButton-text {
					#font(32rpx, rgb(41, 121, 255));
		
					/* #ifdef MP-WEIXIN */
					padding: 0 !important;
					overflow: visible;
					background-color: rgba(#fff, 0);
		
		
					&::after {
						border: none;
						background-color: rgba(#fff, 0);
						border-radius: 0;
					}
		
					&:hover {
						background-color: rgba(#fff, 0);
					}
		
					/* #endif */
				}
		
			}
		
		
		}
		
		/deep/ .u-modal__button-group--confirm-button {
			padding: 0;
		}

	}
</style>